<template>
	<el-menu
		unique-opened
		router
		height="100%"
		:default-active="$route.path"
		background-color="#1F232F"
		text-color="rgba(255, 255, 255, 0.6)"
		active-text-color="#fff"
		class="el-menu-vertical-demo"
		:collapse="isCollapse"
	>
		<SubMenu :menuList="cacheMenus" :isCollapse="isCollapse" />
	</el-menu>
</template>

<script>
import { mapGetters } from 'vuex'
import SubMenu from './SubMenu.vue'
export default {
	props: {
		isCollapse: {
			type: Boolean,
			default: false
		},
		filter: {
			type: String,
			default: ''
		}
	},
	components: { SubMenu },
	data() {
		return {
			cacheMenus: [],
			data: '',
		}
	},
	watch: {
		// filter: {
		// 	handler(val) {
		// 		typeof this.filterMenus === 'function' ? this.filterMenus(val) : null
		// 	},
		// 	immediate: true
		// }
	},
	methods: {
		// changeMenu(i) {
		// 	this.data[i].isActive = !this.data[i].isActive
		// },
		// filterMenus: debounce(300, function (val) {
		// 	if (!val) {
		// 		this.cacheMenus = this.menus
		// 		return
		// 	}
		// 	this.cacheMenus = treeFilter(this.menus, node => {
		// 		return node.meta.title.includes(val)
		// 	})
		// })
	},
	computed: {
		...mapGetters(['menus'])
	},
	mounted() {
		this.cacheMenus = this.menus
	}
}
</script>

<style lang="css" scoped>
.el-menu--collapse {
	min-height: 100%;
}
.el-menu-vertical-demo {
	min-height: 120%;
	border-right: solid 1px #1f232f;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 160px;
	min-height: 100%;
}

.el-menu-vertical-demo /deep/ .el-menu-item.is-active {
	background: linear-gradient(90deg, #3161ff 0%, #1f232f 100%) !important;
}

</style>
